<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--</div>-->
<div id="app1">
    <!--didi这个标签代表的就是<h1>我是刘恒</h1>-->
    <didi></didi>
</div>
<div id="app2">
    <!--自定义组件进行传值-->
    <di v-for="item in items" v-bind:qin="item"></di>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    // 定义一个Vue组件
    Vue.component("didi",{
        template: "<h1>我是刘恒</h1>"
    });
    Vue.component("di",{
        props:["qin"],
        template: "<h1>{{qin}}</h1>"
    });
    var ifa=  new Vue({
        // 元素
        el:"#app1"
    });
    var ifa=  new Vue({
        // 元素
        el:"#app2",
        data:{
            // 定义一个数组
            items:["刘恒","通研2202","图像处理"]
        },
    });
</script>
</body>
</html>
